import allMarker from "./mapMarker/allMarker";
import {
    soilTime, soilSeven, airTime, airSeven, anionTime, waterTime, waterSeven, treeNums,
    treeTop5, todayThing, sevenThing, rainDevice, rainData, rainTime, todayAf,soilGoodDay,airGoodDay,tvocGoodDay,waterGoodDay
} from '../../axios/ecology/index'
import moment from 'moment'
import {monitor,} from "../../axios/intellect/intellect";

export default {
    props: {
        mapData: Object
    },
    data() {
        return {
            showHide: true,
            thingsTable: false,
            tableThingsData: [
                // {name: '空气传感器01', type: '空气传感器告警', date: '03-11/16:30', state: 1},
                // {name: '负离子传感器01', type: '负离子传感器告警', date: '03-11/16:30', state: 1},
                // {name: '空气传感器02', type: '空气传感器告警', date: '03-11/16:30', state: 2},
                // {name: '土壤传感器01', type: '土壤传感器告警', date: '03-11/16:30', state: 2},
                // {name: '空气传感器03', type: '空气传感器告警', date: '03-11/16:30', state: 1},
                // {name: '负离子传感器01', type: '负离子传感器告警', date: '03-11/16:30', state: 1},
                // {name: '水质传感器01', type: '水质传感器告警', date: '03-11/16:30', state: 1},
                // {name: '土壤传感器02', type: '土壤传感器告警', date: '03-11/16:30', state: 2},
                // {name: '土壤传感器03', type: '土壤传感器告警 ', date: '03-11/16:30', state: 1},
                // {name: '负离子传感器01', type: '负离子传感器告警 ', date: '03-11/16:30', state: 1},
            ],
            page: 1,
            rows: 10,
            currentPage: 1,
            soilTimeData: {},
            soilSevenArr: [],
            airTimeData: {},
            airSevenArr: [],
            anionTimeData: {},
            anionSevenArr: [],
            rainTimeData: {},
            waterTimeData: {},
            waterSevenArr: [],
            rainSevenArr: [],
            rainTotal: 0,
            treeNumsData: {},
            treeTop5Data: [],
            treeRankNum: 0,
            totalData: [],  //弹窗里的数据，随变化改变echatrs
            total: 0,
            deviceShow: false,
            spanActive: 1,
            timesActive: 1,
            stateActive: 1,
            rainfall: [],//雨量传感器
            air: [],//空气传感器
            soil: [],//土壤传感器
            water: [],// 水质传感器
            anion: [],// 负离子传感器
            sevenAfObj: {},
            sevenAfToalNum: 0,
            soilId: 0,
            airId: 0,
            anionId: 0,
            waterId: 0,
            todayAfData:[],
            todayAfNum:0,
            unit:"",
            soilGoodDay : 0,
            airGoodDay : 0,
            tvocGoodDay: 0,
            waterGoodDay : 0
        }
    },
    mounted() {
        this.myChart1 = this.$echarts.init(document.getElementById('soilChart'));
        this.getSoliGoodDay()
        this.getAirGoodDay()
        this.getSoilSeven();
        this.getRainDevice(36, 3120, '土壤');
        // this.getAirTime();
        this.getAirSeven();
        this.getRainDevice(36, 3110, '空气');
        // this.getAnionTime();
        this.getAnionSeven();
        this.getRainDevice(36, 3111, '负离子');
        this.getWaterTime();
        this.getWaterSeven();
        this.getRainDevice(36, 3130, '水质');
        this.getTreeNums();
        this.getTreeTop5();

        this.getSevenThing();
        this.getRainDevice(36, 3190, '雨量');
        this.closeTheWindow();
        this.closeTheWindow1();
        this.getTodayAf();
        this.deviceChatrsInit();
        this.getMarkerData()
        this.timer = setInterval(()=>{
            this.getSoliGoodDay()
            this.getAirGoodDay()
            this.getSoilSeven();
            this.getRainDevice(36, 3120, '土壤');
            this.getRainDevice(36, 3110, '空气');
            this.getRainDevice(36, 3111, '负离子');
            this.getRainDevice(36, 3130, '水质');
            this.getRainDevice(36, 3190, '雨量');
        },10000)
    },
    destroyed(){
        window.clearInterval(this.timer)
    },
    methods: {
        getAirGoodDay(){
            //  空气传感器优质天数
            airGoodDay({
                itemId:36,
                pm25Max:35,
                pm25Min : 0
            }).then(res=>{
                console.log(res)
                this.airGoodDay = res.data
            })
            //  水质优质天数
            waterGoodDay({
                itemId:36,
                dissolutionMax:8,
                dissolutionMin : 7,
                itemId : 36,
                phMax : 9,
                phMin : 6,
                temperatureMax : 40,
                temperatureMin : 10
            }).then(res=>{
                console.log(res)
                this.waterGoodDay = res.data
            })
            //  负离子优质天数
            tvocGoodDay({
                itemId:36,
                tvocMax:999999,
                tvocMin : 10000
            }).then(res=>{
                console.log(res)
                this.tvocGoodDay = res.data
            })
        },
        //  土壤优质天数
        getSoliGoodDay(){
            soilGoodDay({
            conductivityMax : 0.8 * 2000,
                conductivityMin : 0,
                itemId : 36
            }).then(res=>{
                console.log(res)
                this.soilGoodDay = res.data
            })
        },
        closeTheWindow() {
            document.addEventListener('mouseup', (e) => {
                let box = this.$refs.windowBox
                if (box) {
                    if (!box.contains(e.target)) {
                        this.thingsTable = false
                    }
                }
            })
        },
        closeTheWindow1() {
            document.addEventListener('mouseup', (e) => {
                let box = this.$refs.windowBox1
                if (box) {
                    if (!box.contains(e.target)) {
                        this.deviceShow = false
                    }
                }
            })
        },
        getSoilTime(deviceId) {
            let params = {
                deviceId: deviceId
            }
            soilTime(params).then(res => {
                console.log(res)
                this.soilTimeData = res.data;
            }, err => {
            })
        },
        getSoilSeven(deviceIds) {
            let params = {
                // deviceIds: deviceIds,
                itemId: 36,
                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                endTime: moment().format('YYYY-MM-DD'),
                timeType: 'day'
            }
            soilSeven(params).then(res => {
                this.soilSevenArr = res.data;
            }, err => {
            })
        },
        getAirTime(deviceId) {
            let params = {
                deviceId: deviceId
            }
            airTime(params).then(res => {
                this.airTimeData = res.data;
            }, err => {
            })
        },
        getAirSeven(deviceIds) {
            let params = {
                // deviceIds: deviceIds,
                itemId: 36,
                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                endTime: moment().format('YYYY-MM-DD'),
                timeType: 'day'
            }
            airSeven(params).then(res => {
                this.airSevenArr = res.data;
            }, err => {
            })
        },
        getAnionTime(deviceId) {
            let params = {
                deviceId: deviceId
            }
            anionTime(params).then(res => {
                this.anionTimeData = res.data;
            }, err => {
            })
        },
        getRainTime(deviceId) {
            let params = {
                deviceId: deviceId
            }
            rainTime(params).then(res => {
                console.log(res)
                this.rainTimeData = res.data;
            }, err => {
            })
        },
        getAnionSeven(deviceIds) {
            let params = {
                // deviceIds: deviceIds,
                itemId: 36,
                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                endTime: moment().format('YYYY-MM-DD'),
                timeType: 'day'
            }
            airSeven(params).then(res => {
                this.anionSevenArr = res.data;
            }, err => {
            })
        },
        getWaterTime(deviceId) {
            let params = {
                deviceId: deviceId
            }
            waterTime(params).then(res => {
                this.waterTimeData = res.data;
            }, err => {
            })
        },
        getWaterSeven(deviceIds) {
            let params = {
                // deviceIds: deviceIds,
                itemId: 36,
                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                endTime: moment().format('YYYY-MM-DD'),
                timeType: 'day'
            }
            waterSeven(params).then(res => {
                this.waterSevenArr = res.data;
            }, err => {
            })
        },
        getTreeNums() {
            treeNums().then(res => {
                this.treeNumsData = res.data;
            }, err => {
            })
        },
        getTreeTop5() {
            treeTop5().then(res => {
                this.treeTop5Data = res.data;
                let total = 0;
                for (var i = 0; i < res.data.length; i++) {
                    total += res.data[i].plantNumber;
                }
                this.treeRankNum = total;
            }, err => {
            })
        },
        getTodayThing() {
            let params = {
                type: 3,
                data: {
                    size: this.rows,
                    current: this.page
                }
            }
            todayThing(params).then(res => {
                this.tableThingsData = res.data.records;
                this.total = res.data.total;
            }, err => {
            })
        },
        getSevenThing() {
            let params = {
                type: 4
            }
            sevenThing(params).then(res => {
                let dateArr = [];
                let soilArr = [];
                let anionArr = [];
                let waterArr = [];
                let airArr = [];
                let tatal1 = 0;
                let tatal2 = 0;
                let tatal3 = 0;
                let tatal4 = 0;
                for (var i = 0; i < res.data.length; i++) {
                    let date = moment().subtract('days', i).format('MM-DD');
                    dateArr.push(date);
                    soilArr.push(res.data[i].number1);
                    waterArr.push(res.data[i].number2);
                    airArr.push(res.data[i].number3);
                    anionArr.push(res.data[i].number4);
                    tatal1 += res.data[i].number1;
                    tatal2 += res.data[i].number2;
                    tatal3 += res.data[i].number3;
                    tatal4 += res.data[i].number4;
                }
                this.sevenAfObj = {
                    dateArr: dateArr,
                    soilArr: soilArr,
                    waterArr: waterArr,
                    airArr: airArr,
                    anionArr: anionArr
                }
                this.sevenAfToalNum = tatal1 + tatal2 + tatal3 + tatal4;
            }, err => {
            })
        },
        getTodayAf() {
            let params = {
                type: 4
            }
            todayAf(params).then(res => {
                console.log(res.data,12312);
                this.todayAfData = res.data.dvoList;
                this.todayAfNum = res.data.totalNumber;
            })
        },
        getSoilChange(startTime, endTime) {
            let params = {
                // deviceIds: this.soilId,
                itemId: 36,
                startTime: startTime,
                endTime: endTime,
                timeType: 'day'
            }
            soilSeven(params).then(res => {
                this.totalData = res.data;
            }, err => {
            })
        },
        getAirChange(startTime, endTime) {
            let params = {
                // deviceIds: this.airId,
                itemId: 36,
                startTime: startTime,
                endTime: endTime,
                timeType: 'day'
            }
            airSeven(params).then(res => {
                this.totalData = res.data;
            }, err => {
            })
        },
        getWaterChange(startTime, endTime) {
            let params = {
                // deviceIds: this.waterId,
                itemId: 36,
                startTime: startTime,
                endTime: endTime,
                timeType: 'day'
            }
            waterSeven(params).then(res => {
                this.totalData = res.data;
            }, err => {
            })
        },
        getAnionChange(startTime, endTime) {
            let params = {
                // deviceIds: this.anionId,
                itemId: 36,
                startTime: startTime,
                endTime: endTime,
                timeType: 'day'
            }
            airSeven(params).then(res => {
                this.totalData = res.data;
            }, err => {
            })
        },
        getRainDevice(itemIds, typeIds, name) {
            // console.log(itemIds, typeIds, name)
            let params;
            if(name != '雨量') {
                params = {
                    itemIds: itemIds,
                    typeIds: typeIds,
                    isShow: 1,
                }
            } else {
                params = {
                    itemIds: itemIds,
                    typeIds: typeIds,
                }
            }
            rainDevice(params).then(res => {
                // console.log(res.data,name)
                if (res.data && res.data.length > 0) {
                    if (name == '土壤') {
                        this.getSoilSeven(res.data[0].deviceId);
                        this.getSoilTime(res.data[0].deviceId);
                        this.soilId = res.data[0].deviceId;
                    }
                    if (name == '空气') {
                        this.getAirSeven(res.data[0].deviceId);
                        this.getAirTime(res.data[0].deviceId);
                        this.airId = res.data[0].deviceId;
                    }
                    if (name == '负离子') {
                        this.getAnionSeven(res.data[0].deviceId);
                        this.getAnionTime(res.data[0].deviceId);
                        this.anionId = res.data[0].deviceId;
                    }
                    if (name == '水质') {
                        // console.log(res.data[0].deviceId, '-------------')
                        this.getWaterSeven(res.data[0].deviceId);
                        this.getWaterTime(res.data[0].deviceId);
                        this.waterId = res.data[0].deviceId;
                    }
                    if (name == '雨量') {
                        this.getRainData(res.data[0].deviceId);
                        this.getRainTime(res.data[0].deviceId);
                    }
                }
            }, err => {
            })
        },
        getRainData(deviceIds) {
            let params = {
                // deviceIds: deviceIds,
                itemId: 36,
                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                endTime: moment().format('YYYY-MM-DD'),
                timeType: 'day'
            }
            rainData(params).then(res => {
                this.rainSevenArr = res.data;
                // console.log(this.rainSevenArr,31231312);
            }, err => {
            })
        },
        changeShow() {
            this.showHide = !this.showHide;
        },
        openThingsTable() {
            this.thingsTable = !this.thingsTable;
            this.getTodayThing();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getTodayThing();
        },
        openDeviceWindow(val) {
            this.deviceShow = true;
            this.spanActive = val;
            this.timesActive = 1;
            if (val == 1) {
                //土壤传感器实时数据
                this.getSoilChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            } else if (val == 2) {
                //空气传感器实时数据
                this.getAirChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            } else if (val == 3) {
                //负离子传感器实时数据
                this.getAnionChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            } else if (val == 4) {
                //水质传感器实时数据
                this.getWaterChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            }
        },
        changeDevice(val) {
            this.spanActive = val;
            this.timesActive = 1;
            this.stateActive = 1;
            if (val == 1) {
                //土壤传感器实时数据
                this.getSoilChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            } else if (val == 2) {
                //空气传感器实时数据
                this.getAirChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            } else if (val == 4) {
                //水质传感器实时数据
                this.getWaterChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            } else if (val == 3) {
                //负离子传感器实时数据
                this.getAnionChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
            }
        },
        closeDeviceShow() {
            this.timesActive = 1;
            this.deviceShow = false;
        },
        changeTimes(val) {
            this.timesActive = val;
            if (val == 1) {
                //今日
                if (this.spanActive == 1) {
                    this.getSoilChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 2) {
                    this.getAirChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 4) {
                    this.getWaterChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 3) {
                    this.getAnionChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                }
            } else if (val == 2) {
                //近7日
                if (this.spanActive == 1) {
                    this.getSoilChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 2) {
                    this.getAirChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 4) {
                    this.getWaterChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 3) {
                    this.getAnionChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                }
            } else if (val == 3) {
                //近30日
                if (this.spanActive == 1) {
                    this.getSoilChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 2) {
                    this.getAirChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 4) {
                    this.getWaterChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 3) {
                    this.getAnionChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                }
            }
        },
        changeState(val) {
            this.stateActive = val;
            if (this.timesActive == 1) {
                //今日
                if (this.spanActive == 1) {
                    this.getSoilChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 2) {
                    this.getAirChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));

                } else if (this.spanActive == 4) {
                    this.getWaterChange(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                }
            } else if (this.timesActive == 2) {
                //近7日
                if (this.spanActive == 1) {
                    this.getSoilChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 2) {
                    this.getAirChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 4) {
                    this.getWaterChange(moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                }
            } else if (this.timesActive == 3) {
                //近30日
                if (this.spanActive == 1) {
                    this.getSoilChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 2) {
                    this.getAirChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                } else if (this.spanActive == 4) {
                    this.getWaterChange(moment().subtract('days', 29).format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
                }
            }
        },
        soilChartInit(dom) {
            // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
            // const nums = [0,0.6,1,1.4,2,2.2,4];
            let dates = [];
            let nums = [];
            for (var i = 0; i < this.soilSevenArr.length; i++) {
                dates.push(this.soilSevenArr[i].selectTime.substring(5, 10));
                // nums.push(this.soilSevenArr[i].conductivityAvg / 1000);
                let val = this.soilSevenArr[i].salinityAvg;
                if (val >= 0 && val < 0.8) {
                    nums.push(0);
                } else if (val >= 0.8 && val < 1.2) {
                    nums.push(1);
                } else if (val >= 1.2 && val < 1.6) {
                    nums.push(2);
                } else if (val >= 1.6 && val < 3.2) {
                    nums.push(3);
                } else {
                    nums.push(4);
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let text = '';
                        if (params[0].value == 0) {
                            text = '非盐渍化';
                        } else if (params[0].value == 1) {
                            text = '盐渍化';
                        } else if (params[0].value == 2) {
                            text = '中度盐土';
                        } else if (params[0].value == 3) {
                            text = '重度盐土';
                        } else if (params[0].value == 4) {
                            text = '极重盐土';
                        }
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 56,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(等级)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: function (value) {
                            var texts = [];
                            if (value == 0) {
                                texts.push('非盐渍化');
                            } else if (value == 1) {
                                texts.push('盐渍化');
                            } else if (value == 2) {
                                texts.push('中度盐土');
                            } else if (value == 3) {
                                texts.push('重度盐土');
                            } else if (value == 4) {
                                texts.push('极重盐土');
                            }
                            return texts;
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    // splitNumber: 4,
                    // minInterval: 1,
                    max: 4
                },
                series: [{
                    name: '环境指数',
                    type: 'line',
                    data: nums,
                    lineStyle: {
                        color: '#32E9FF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#32E9FF',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        airChartInit() {
            const myChart = this.$echarts.init(document.getElementById('airChart'));
            // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
            // const nums = [0,2,3,4,4,2,5];
            let dates = [];
            let nums = [];
            for (var i = 0; i < this.airSevenArr.length; i++) {
                dates.push(this.airSevenArr[i].selectTime.substring(5, 10));
                // nums.push(this.airSevenArr[i].pm25Avg);
                let val = this.airSevenArr[i].pm25Avg;
                if (val >= 0 && val < 35) {
                    nums.push(5);
                } else if (val >= 35 && val < 75) {
                    nums.push(4);
                } else if (val >= 75 && val < 115) {
                    nums.push(3);
                } else if (val >= 115 && val < 150) {
                    nums.push(2);
                } else if (val >= 150 && val < 250) {
                    nums.push(1);
                } else {
                    nums.push(0);
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let text = '';
                        if (params[0].value == 0) {
                            text = '严重污染';
                        } else if (params[0].value == 1) {
                            text = '重度污染';
                        } else if (params[0].value == 2) {
                            text = '中度污染';
                        } else if (params[0].value == 3) {
                            text = '轻度污染';
                        } else if (params[0].value == 4) {
                            text = '良';
                        } else if (params[0].value == 5) {
                            text = '优';
                        }
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 56,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(等级)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: function (value) {
                            var texts = [];
                            if (value == 0) {
                                texts.push('严重污染');
                            } else if (value == 1) {
                                texts.push('重度污染');
                            } else if (value == 2) {
                                texts.push('中度污染');
                            } else if (value == 3) {
                                texts.push('轻度污染');
                            } else if (value == 4) {
                                texts.push('良');
                            } else if (value == 5) {
                                texts.push('优');
                            }
                            return texts;
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    // splitNumber: 4,
                    // minInterval: 1,
                    max: 5
                },
                series: [{
                    name: '环境指数',
                    type: 'line',
                    data: nums,
                    lineStyle: {
                        color: '#1FFE9A',
                        width: 3
                    },
                    itemStyle: {
                        color: '#1FFE9A',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(31,254,154,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(31,254,154,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            myChart.setOption(options)
        },
        anionChartInit() {
            const myChart = this.$echarts.init(document.getElementById('anionChart'));
            const dates = [];
            const nums = [];
            for (var i = 0; i < this.anionSevenArr.length; i++) {
                dates.push(this.anionSevenArr[i].selectTime.substring(5, 10));
                // nums.push(this.anionSevenArr[i].tvocAvg);
                let val = this.anionSevenArr[i].tvocAvg;
                if (val >= 0 && val < 400) {
                    nums.push(0);
                } else if (val >= 400 && val < 1000) {
                    nums.push(1);
                } else if (val >= 1000 && val < 5000) {
                    nums.push(2);
                } else if (val >= 5000 && val < 10000) {
                    nums.push(3);
                } else if (val >= 10000) {
                    nums.push(4);
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let text = '';
                        if (params[0].value == 0) {
                            text = '绿地级';
                        } else if (params[0].value == 1) {
                            text = '公园级';
                        } else if (params[0].value == 2) {
                            text = '郊野级';
                        } else if (params[0].value == 3) {
                            text = '高山级';
                        } else if (params[0].value == 4) {
                            text = '森林级';
                        }
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 46,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(等级)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: function (value) {
                            var texts = [];
                            if (value == 0) {
                                texts.push('绿地级');
                            } else if (value == 1) {
                                texts.push('公园级');
                            } else if (value == 2) {
                                texts.push('郊野级');
                            } else if (value == 3) {
                                texts.push('高山级');
                            } else if (value == 4) {
                                texts.push('森林级');
                            }
                            // if (value >= 0 && value < 400) {
                            //     texts.push('绿地级');
                            // } else if (value >= 400 && value < 1000) {
                            //     texts.push('公园级');
                            // } else if (value >= 1000 && value < 5000) {
                            //     texts.push('郊野级');
                            // } else if (value >= 5000 && value < 10000) {
                            //     texts.push('高山级');
                            // } else {
                            //     texts.push('森林级');
                            // }
                            return texts;
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    // splitNumber: 4,
                    // minInterval: 1,
                    max: 4
                },
                series: [{
                    name: '环境指数',
                    type: 'line',
                    data: nums,
                    lineStyle: {
                        color: '#FD7BB8',
                        width: 3
                    },
                    itemStyle: {
                        color: '#FD7BB8',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(253,123,184,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(253,123,184,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            myChart.setOption(options)
        },
        waterSevenInit() {
            const myChart = this.$echarts.init(document.getElementById('waterSeven'));
            const dates = [];
            const nums = [];
            for (var i = 0; i < this.waterSevenArr.length; i++) {
                dates.push(this.waterSevenArr[i].selectTime.substring(5, 10));
                // nums.push(this.waterSevenArr[i].dissolutionAvg);
                let val = this.waterSevenArr[i].dissolutionAvg;
                if (val >= 0 && val < 2) {
                    nums.push(0);
                } else if (val >= 2 && val < 3) {
                    nums.push(1);
                } else if (val >= 3 && val < 5) {
                    nums.push(2);
                } else if (val >= 5 && val < 6) {
                    nums.push(3);
                } else if (val >= 6) {
                    nums.push(4);
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let text = '';
                        if (params[0].value == 0) {
                            text = 'V类';
                        } else if (params[0].value == 1) {
                            text = 'IV类';
                        } else if (params[0].value == 2) {
                            text = 'III类';
                        } else if (params[0].value == 3) {
                            text = 'II类';
                        } else if (params[0].value == 4) {
                            text = 'I 类';
                        }
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 46,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(等级)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: function (value) {
                            var texts = [];
                            if (value == 0) {
                                texts.push('V类');
                            } else if (value == 1) {
                                texts.push('IV类');
                            } else if (value == 2) {
                                texts.push('III类');
                            } else if (value == 3) {
                                texts.push('II类');
                            } else if (value == 4) {
                                texts.push('I 类');
                            }
                            // if (value >= 0 && value < 2) {
                            //     texts.push('V类');
                            // } else if (value >= 2 && value < 3) {
                            //     texts.push('IV类');
                            // } else if (value >= 3 && value < 5) {
                            //     texts.push('III类');
                            // } else if (value >= 5 && value < 6) {
                            //     texts.push('II类');
                            // } else {
                            //     texts.push('I类');
                            // }
                            return texts;
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    // splitNumber: 4,
                    // minInterval: 1,
                    max: 4
                },
                series: [{
                    name: '环境指数',
                    type: 'line',
                    data: nums,
                    lineStyle: {
                        color: '#FFAD95',
                        width: 3
                    },
                    itemStyle: {
                        color: '#FFAD95',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(255,173,149,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(255,173,149,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            myChart.setOption(options)
        },
        rainSevenInit() {
            const myChart = this.$echarts.init(document.getElementById('rainSeven'));
            const dates = [];
            const nums = [];
            for (var i = 0; i < this.rainSevenArr.length; i++) {
                dates.push(this.rainSevenArr[i].selectTime.substring(5, 10));
                // nums.push(this.rainSevenArr[i].number24Total);
                let val = this.rainSevenArr[i].number24Total;
                if (val >= 0 && val < 1) {
                    nums.push(0);
                } else if (val >= 1 && val < 10) {
                    nums.push(1);
                } else if (val >= 10 && val < 25) {
                    nums.push(2);
                } else if (val >= 25 && val < 50) {
                    nums.push(3);
                } else if (val >= 50 && val < 100) {
                    nums.push(4);
                } else if (val >= 100 && val < 200) {
                    nums.push(5);
                } else if (val >= 200) {
                    nums.push(6);
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        let text = '';
                        if (params[0].value == 0) {
                            text = '晴';
                        } else if (params[0].value == 1) {
                            text = '小雨';
                        } else if (params[0].value == 2) {
                            text = '中雨';
                        } else if (params[0].value == 3) {
                            text = '大雨';
                        } else if (params[0].value == 4) {
                            text = '暴雨';
                        } else if (params[0].value == 5) {
                            text = '大暴雨';
                        } else if (params[0].value == 6) {
                            text = '特大暴雨';
                        }
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 50,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(等级)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: function (value) {
                            var texts = [];
                            if (value == 0) {
                                texts.push('晴');
                            } else if (value == 1) {
                                texts.push('小雨');
                            } else if (value == 2) {
                                texts.push('中雨');
                            } else if (value == 3) {
                                texts.push('大雨');
                            } else if (value == 4) {
                                texts.push('暴雨');
                            } else if (value == 5) {
                                texts.push('大暴雨');
                            } else if (value == 6) {
                                texts.push('特大暴雨');
                            }
                            // if (value > 0 && value < 10) {
                            //     texts.push('小雨');
                            // } else if (value >= 10 && value < 25) {
                            //     texts.push('中雨');
                            // } else if (value >= 25 && value < 50) {
                            //     texts.push('大雨');
                            // } else if (value >= 50 && value < 100) {
                            //     texts.push('暴雨');
                            // }  else if (value >= 100 && value < 200) {
                            //     texts.push('大暴雨');
                            // }  else if (value >= 200) {
                            //     texts.push('特大暴雨');
                            // }
                            return texts;
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    // splitNumber: 5,
                    max: 6
                },
                series: [{
                    name: '环境指数',
                    type: 'line',
                    data: nums,
                    lineStyle: {
                        color: '#EEFD7B',
                        width: 3
                    },
                    itemStyle: {
                        color: '#EEFD7B',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(238, 253, 123, 0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(238, 253, 123, 0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            myChart.setOption(options)
        },
        treesNumsInit() {
            var myChart = this.$echarts.init(document.getElementById('treesNums'));
            let makeNames = [];
            let makeRates = [];
            for (var i = 0; i < this.treeNumsData.treeSpecies.length; i++) {
                makeNames.push(this.treeNumsData.treeSpecies[i].plantType);
                makeRates.push(this.treeNumsData.treeSpecies[i].plantNumber);
            }
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 40,
                    left: 46,
                    right: 0,
                    bottom: 24
                },
                xAxis: {
                    data: makeNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(棵)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -37]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 4,
                    // minInterval: 1,
                },
                series: [{
                    name: '多次预约游客',
                    type: 'bar',
                    data: makeRates,
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#32E9FF'
                    }
                }]
            }
            myChart.setOption(option)
        },
        treeAllInit() {
            var myChart = this.$echarts.init(document.getElementById('treeAll'));
            let makeNames = [];
            let makeRates = [];
            for (var i = 0; i < this.treeTop5Data.length; i++) {
                makeNames.push(this.treeTop5Data[i].equipName);
                makeRates.push(this.treeTop5Data[i].plantNumber);
            }
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 40,
                    left: 50,
                    right: 10,
                    bottom: 24
                },
                xAxis: {
                    data: makeNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                yAxis: {
                    name: '(棵)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -37]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 4,
                    // minInterval: 1,
                },
                series: [{
                    name: '多次预约游客',
                    type: 'bar',
                    data: makeRates,
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#32E9FF'
                    }
                }]
            }
            myChart.setOption(option)
        },
        devicePieInit() {
            var myChart = this.$echarts.init(document.getElementById('devicePie'));
            let dataArr = [];
            let colorArr = ['#32E9FF', '#2BADFF', '#1FFE9A', '#EEFD7B'];
            for(var i = 0; i < this.todayAfData.length; i++) {
                dataArr.push({
                    name: this.todayAfData[i].gardName,
                    value: this.todayAfData[i].number,
                    itemStyle: {color: colorArr[i]}
                })
            }
            let datas = {
                soil: 25,
                anion: 25,
                water: 25,
                air: 25
            };
            const options = {
                title: {
                    text: '当日总事件数量',
                    left: '9%',
                    bottom: '-1%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['58%', '75%'],
                        center: ['20%', '45%'],
                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        startAngle: 30,
                        emphasis: {},
                        label: {
                            show: false,
                            fontSize: 20,
                            formatter: '{b}\n{c}'
                        },
                        labelLine: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        markLine: {
                            silent: true
                        },
                        data: dataArr
                    }
                ]
            }
            myChart.setOption(options)
        },
        sevenThingsInit() {
            var myChart = this.$echarts.init(document.getElementById('sevenThings'));
            const dateArr = this.sevenAfObj.dateArr;
            const soilArr = this.sevenAfObj.soilArr;
            const anionArr = this.sevenAfObj.anionArr;
            const waterArr = this.sevenAfObj.waterArr;
            const airArr = this.sevenAfObj.airArr;
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    }
                },
                legend: [
                    {
                        orient: 'horizontal',
                        x: '5%',
                        y: '86%',
                        align: 'left',
                        data: ['土壤传感器'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '30%',
                        y: '86%',
                        align: 'left',
                        data: ['负离子'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '48%',
                        y: '86%',
                        align: 'left',
                        data: ['水质传感器'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '72%',
                        y: '86%',
                        align: 'left',
                        data: ['空气传感器'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    }
                ],
                grid: {
                    top: 0,
                    left: 50,
                    right: 30,
                    bottom: 50
                },
                calculable: true,
                xAxis: [{
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#B2CEEC',
                        fontSize: 10

                    },
                    splitArea: {
                        show: false
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }else{
                            return value.max;
                        }
                    }
                }],
                yAxis: [{
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    data: dateArr
                }],
                series: [
                    {
                        name: '土壤传感器',
                        type: 'bar',
                        stack: '总量',
                        barMaxWidth: 8,
                        barGap: '10%',
                        itemStyle: {color: '#32E9FF'},
                        data: soilArr
                    },
                    {
                        name: '负离子',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#2BADFF'},
                        data: anionArr
                    },
                    {
                        name: '水质传感器',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#1FFE9A'},
                        data: waterArr
                    },
                    {
                        name: '空气传感器',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#EEFD7B'},
                        data: airArr
                    },
                ]
            }
            myChart.setOption(option)
        },
        deviceChatrsInit() {
            const myChart = this.$echarts.init(document.getElementById('deviceChatrs'));
            const dates = [];
            const inPark = [];
            let unit = '';
            for (var i = 0; i < this.totalData.length; i++) {
                dates.push(this.totalData[i].selectTime);
                if( this.spanActive !== 3 ){
                    if (this.stateActive == 1) {
                        //温度
                        inPark.push(this.totalData[i].temperatureAvg);
                         unit = '℃';
                    } else if (this.stateActive == 2) {
                        //湿度
                        inPark.push(this.totalData[i].humidityAvg);
                        unit = 'RH%';
                    } else if (this.stateActive == 3) {
                        //土壤盐分
                        inPark.push(this.totalData[i].salinityAvg);
                        unit = '%'
                    } else if (this.stateActive == 4) {
                        //PM2.5
                        inPark.push(this.totalData[i].pm25Avg);
                        unit = 'mg/m³'
                    } else if (this.stateActive == 5) {
                        //溶氧
                        inPark.push(this.totalData[i].dissolutionAvg);
                        unit = 'mg/l'
                    }
                }else{
                    unit = '/cm³'
                    inPark.push(this.totalData[i].noiseAvg);
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 46,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: unit,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 3,
                    // minInterval: 1
                },
                series: [{
                    name: '数值',
                    type: 'line',
                    data: inPark,
                    lineStyle: {
                        color: '#32E9FF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#32E9FF',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            myChart.setOption(options)
        },
        // 获取点位信息
        getMarkerData() {
            // 空气传感器
            monitor(3110).then(res => {
                res.data.forEach(item => {
                    item.names = "空气传感器"
                })
                this.air = res.data
            })
            // 土质传感器
            monitor(3120).then(res => {
                res.data.forEach(item => {
                    item.names = "土壤传感器"
                })
                this.soil = res.data//土壤传感器
            })
            // 水质传感器
            monitor(3130).then(res => {
                res.data.forEach(item => {
                    item.names = "水质传感器"
                })
                this.water = res.data// 水质传感器
            })
            // 负离子传感器
            monitor(3111).then(res => {
                console.log(res.data, '负离子')
                res.data.forEach(item => {
                    item.names = "负离子传感器"
                })
                this.anion = res.data// 负离子传感器
            })
            // 雨量传感器
            monitor(3190).then(res => {
                res.data.forEach(item => {
                    console.log(item.name)
                    item.names = "雨量传感器"
                })
                this.rainfall = res.data//雨量传感器
            })
            setTimeout(() => {
                this.markerData = [
                    this.air,//空气传感器
                    this.soil,//土壤传感器 // 智能屏幕点位
                    this.water, // 水质传感器
                    this.anion, // 负离子传感器
                    this.rainfall // 雨量传感器
                ]
                this.$refs.allMarker.setAllMarker(this.markerData, this.mapData)
            }, 1000)
        },
    },
    watch: {
        deep:true,
        'soilSevenArr':{
            handler(newVal,oldVal){
                this.soilChartInit(this.myChart1);
            }
        },
        airSevenArr(val) {
            this.airChartInit();
        },
        anionSevenArr(val) {
            this.anionChartInit();
        },
        waterSevenArr(val) {
            this.waterSevenInit();
        },
        treeNumsData(val) {
            this.treesNumsInit();
        },
        treeTop5Data(val) {
            this.treeAllInit();
        },
        totalData(val) {
            this.deviceChatrsInit();
        },
        sevenAfObj(val) {
            this.sevenThingsInit();
        },
        rainSevenArr(val) {
            this.rainSevenInit();
        },
        todayAfData(val) {
            this.devicePieInit();
        }
    },
    components: {
        allMarker
    },
    // 页面切换前清除当前页面上的点位信息
    beforeDestroy() {

    }
}